<template>
  <div id="app" class="warpper">
    <div ref="chart" style="width: 900px; height: 600px" />
    <img ref="dot" hidden src="../images/areaImage1.png" />
    <img ref="dot2" hidden src="../images/areaIamge2.png" />
  </div>
</template>

<script>
import * as echarts from "echarts";
import jingzhouMap from "./jingzhouMap.json";

const deactivatedBg = require("../images/blue-bg.png");
const activatedBg = require("../images/red-bg.png");
const specialBg = require("../images/orange-bg.png");

export default {
  name: "App",
  mounted() {
    const myChart = echarts.init(this.$refs.chart);
    echarts.registerMap("jingzhouMap", jingzhouMap);
    const option = {
      geo: [
        {
          // 整个地图最外部轮廓的外阴影
          map: "jingzhouMap",
          z: 7,
          roam: false,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "46%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          emphasis: {},
          itemStyle: {
            normal: {
              areaColor: "#2f9fe7",
              shadowColor: "rgba(12, 81, 169)",
              borderColor: "#41b8ff",
              shadowBlur: 8,
              borderWidth: 8,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
            emphasis: {
              disabled: false, // 是否可以被选中
              label: {
                show: false,
              },
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 6,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "46%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              areaColor: "#2f9fe7",
              shadowColor: "rgba(12, 81, 169,0.5)",
              borderColor: "#41b8ff",
              shadowBlur: 8,
              borderWidth: 8,
              shadowOffsetY: 20,
              shadowOffsetX: 5,
            },
            emphasis: {
              disabled: true, // 是否可以被选中
              label: {
                show: false,
              },
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 5,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "46%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              areaColor: "#2f9fe7",
              shadowColor: "rgba(12, 81, 169,0.3)",
              borderColor: "#41b8ff",
              shadowBlur: 8,
              borderWidth: 8,
              shadowOffsetY: 50,
              shadowOffsetX: 10,
            },
            emphasis: {
              disabled: true, // 是否可以被选中
              label: {
                show: false,
              },
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 4,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "46%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              areaColor: "#2f9fe7",
              shadowColor: "rgba(13, 81, 184,0.3)",
              borderColor: "#41b8ff",
              shadowBlur: 8,
              borderWidth: 8,
              shadowOffsetY: 60,
              shadowOffsetX: 10,
            },
            emphasis: {

              label: {
                show: false,
              },
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 3,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "56%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(13, 95, 184,0.6)",
              shadowBlur: 10,
              shadowOffsetY: -4,
              // shadowOffsetX: 5,
            },
            emphasis: {
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(24, 117, 185,0.7)",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 2,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "56%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(13, 95, 184,0.6)",
              shadowBlur: 10,
              shadowOffsetY: -8,
              // shadowOffsetX: 5,
            },
            emphasis: {
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(24, 117, 185,0.7)",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
        {
          // 中间部分的蓝色阴影-主体部分
          map: "jingzhouMap", // 表示中国地图
          roam: false,
          z: 1,
          aspectScale: 0.9, // 长宽比
          zoom: 1.32,
          tooltip: {
            show: false,
          },
          label: {
            show: false, // 是否显示对应地名
          },
          layoutCenter: ["50%", "56%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          itemStyle: {
            normal: {
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(24, 131, 220,0.2)",
              shadowBlur: 8,
              shadowOffsetY: -2,
              // shadowOffsetX: 5,
            },
            emphasis: {
              areaColor: "#38b4fc",
              borderColor: "#6dceff",
              borderWidth: 5,
              // 内部阴影
              shadowColor: "rgba(9, 117, 185,0.7)",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      ],
      series: [
        {
          type: "map", // 设置图表类型为地图
          map: "jingzhouMap", // 地图要加载的JSON文件
          zoom: 1.32, // 地图缩放大小，这个根据自己需求，默认是1，不缩放
          z: 8,
          layoutCenter: ["50%", "46%"], //  定义地图中心在屏幕中的位置
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 650,
          aspectScale: 0.9, // 长宽比
          roam: false,

          itemStyle: {
            // 这里就是设置item 的样式，也就是地图中每个区块的样式（区块就是JSON文件中包含经纬度信息的对象，获取的地图JSON文件中应该有一个数组，其中的每一个对象就对应一个区块）
            normal: {
              // 区块的基本样式
              borderColor: "#41b8ff", // 区块的边界（边框）颜色
              borderWidth: 3, // 区块的边界（边框）宽度
              areaColor: {
                // 给底图设置颜色
                image: this.$refs.dot, // 如果是图片必须是一个DOM元素
              },
              label: {
                show: true, // 是否显示label
                fontSize: 14, // 字体大小
                color: "#fff", // 字体颜色
                formatter: function (params) {
                  const areaname = params.name;
                  return `{a|${areaname}}`; // |前代表选择的rich项，后面代表要展示的部分
                },
                rich: {
                  a: {
                    // a代表就是分类，通过在formatter中进行选择，就代表使用a对象下的属性
                    color: "#fff",
                    padding: 8,
                    width: 35,
                    height: 8,
                    fontSize: 14,
                    fontWeight: "normal",
                    fontFamily: "Adobe Heiti Std",
                    position: "left",
                    backgroundColor: { image: deactivatedBg },
                  },
                },
              },
            },
            emphasis: {
              // 区块高亮时的样式（鼠标移入的时候可以选中进行高亮显示）
              borderColor: "#fff",
              shadowBlur: 10, // 模糊度
              shadowColor: "rgba(0,255,244,0.6)", // 模糊阴影的颜色
              borderWidth: 4,
              color: "#41b8ff", // 鼠标选择区域颜色
              areaColor: {
                image: this.$refs.dot2,
              },
              label: {
                show: true,
                fontSize: 14,
                formatter: function (params) {
                  const areaname = params.name;
                  if (params.name === "洪湖市") {
                    return `{a|${areaname}}`;
                  } else {
                    return `{b|${areaname}}`;
                  }
                },
                rich: {
                  a: {
                    color: "#fff",
                    padding: 8,
                    width: 35,
                    height: 8,
                    fontSize: 14,
                    fontWeight: "normal",
                    fontFamily: "Adobe Heiti Std",
                    position: "left",
                    backgroundColor: { image: activatedBg },
                  },
                  b: {
                    color: "#fff",
                    padding: 8,
                    width: 35,
                    height: 8,
                    fontSize: 14,
                    fontWeight: "normal",
                    fontFamily: "Adobe Heiti Std",
                    position: "left",
                    backgroundColor: { image: specialBg },
                  },
                },
              },
            },
          },
        },
      ],
    };

    myChart.setOption(option);
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
}
.warpper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/bg.png") no-repeat center;
}
</style>
